const path = require('path');
const webpack = require('webpack');
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
// baseUrl: BASE_URL,
// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/';
// gzip
// 这个优化方式需要服务器（后端）开启gzip,这里我只说一下前端需要做的事情
// 注意： gzip_static 生效的前提是nginx（如果用的是nginx）开启了gzip_static压缩并且请求目录下存在名称相同且以.gz 结尾的文件。
// 使用 gzip_static 压缩的话要先准备好压缩后的 gz 文件，并且服务器会消耗更多的空间来存储压缩文件和原文件，这个有利有弊要自己衡量。
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;


// const assetsCDN = {
//   // webpack build externals
//   externals: {
//     vue: 'Vue',
//     'vue-router': 'VueRouter',
//     vuex: 'Vuex',
//     axios: 'axios'
//   },
//   css: [],
//   // https://unpkg.com/browse/vue@2.6.10/
//   js: [
//     '//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
//     '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
//     '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
//     '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js'
//   ]
// }

const resolve = dir => path.join(__dirname, dir);
module.exports = {
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

  configureWebpack: config => {
    // 打包生产环境不打印console.log信息
    if (IS_PROD) {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
    // config["externals"] = assetsCDN.externals
    return {
      plugins: [
        // Ignore all locale files of moment.js
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: productionGzipExtensions,
          threshold: 10240, // 对超过10k的数据进行压缩
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        }),
      ],
      // externals: BASE_URL ? assetsCDN.externals : {}
    }
  },

  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('@assets', resolve('src/assets'))
      .set('@styles', resolve('src/assets/styles'))
      .set('@images', resolve('src/assets/images'))
      .set('@C', resolve('src/components'));
    // if (BASE_URL) {
    //   config.plugin('html').tap(args => {
    //     args[0].cdn = assetsCDN
    //     return args
    //   })
    // }
  },
  // 打包路径
  outputDir: process.env.outputDir,
  //关闭本地调试代码格式效验、
  lintOnSave: false,
  // 打包时不生成.map文件
  productionSourceMap: false,
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  devServer: {
    open: true,
    port: 8080,
    https: false,
    hotOnly: false,
    hot: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: BASE_URL, // 你请求的第三方接口
        // target: "https://api.ryz1620.com/", //服务器
        // target: "https://.dev.littlegood.cn/", //测试
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
          '^/api': ''
        }
      }
    }
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */
          // 'primary-color': '#F548AB',
          // 'link-color': '#F548AB',
          // 'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      },
    },
  },
};
